<template>
	<view class="nav">
		<view class="nova">
			<view class="nova-b">
				<h4 class="cell">
					当前选择
				</h4>
				<div class="list">
					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
						:range="multiArray">
						<div class="ipt">
							{{ multiArray[0][multiIndex[0]] }}，{{ multiArray[1][multiIndex[1]] }}，{{ multiArray[2][multiIndex[2]] }}
						</div>
					</picker>
				</div>
			</view>
			<view class="nova-b">
				<h4>账户余额(￥)</h4>
				<span>0</span>
			</view>
			<view class="nova-c">
				<p>可用水量(T)</p>
				<span>0</span>
			</view>
			<view class="nova-c">
				<p>已用水量(T)</p>
				<span>0</span>
			</view>
		</view>
		<view class="nova-d">
			<p>充值金额</p>
			<span>元</span>
			<input type="text" placeholder="0.00">
		</view>
		选择支付平台
		<view class="nova-e" @click="selectAlipay">
			<image src="../.././static/mipmap-xxxhdpi/icon_zfb.png" mode=""></image>
			<span>支付宝支付</span>
			<radio name="payment" value="alipay" />
		</view>
		<view class="nova-e" @click="selectWeChat">
			<image src="../.././static/mipmap-xxxhdpi/icon_wechat.png" mode=""></image>
			<span>微信支付</span>
			<radio name="payment" value="wechat" />
		</view>
		<!-- 银行卡 -->
		<view class="nova-e" @click="selectWeChat">
			<image src="../.././static/mipmap-xxxhdpi/icon_payment_add.png" mode=""></image>
			<span>新增银行卡支付</span>
		</view>
		<span class="span">注:水费电费充值账户为同一个账户。</span>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	let lou = reactive([])
	const buildingId = ref(0); // 栋楼的id值
	const floorId = ref(0); // 几层的id值
	import {
		Dormitory
	} from "@/utils/file.js"
	// 楼层
	Dormitory(uni.getStorageSync("token"),  buildingId.value).then(res => {
		console.log(res.data.data, "栋楼");
		res.data.data.map(item => {
			lou.push(item.name)
		})
		console.log(lou);
	})
	// 几层
	Dormitory(uni.getStorageSync("token"),floorId.value).then(res=>{ //id:153
		console.log(res,"几层");
	})
	// 级联选择器
	let index = 0;
	const multiArray = reactive([
		lou, //栋楼
		['中国', '日本'], //几层
		['北京', '上海', '广州'] //门室
	]);
	const multiIndex = reactive([0, 0, 0]);

	const bindPickerChange = (e) => {
		console.log('picker发送选择改变，携带值为：' + e.detail.value);
		index = e.detail.value;
	};

	const bindMultiPickerColumnChange = (e) => {
		console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
		multiIndex[e.detail.column] = e.detail.value;
		switch (e.detail.column) {
			case 0: //拖动第1列
				switch (multiIndex[0]) {
					case 0:
						multiArray[1] = ['中国', '日本'];
						multiArray[2] = ['北京', '上海', '广州'];
						break;
					case 1:
						multiArray[1] = ['英国', '法国'];
						multiArray[2] = ['伦敦', '曼彻斯特'];
						break;
				}
				multiIndex.splice(1, 1, 0);
				multiIndex.splice(2, 1, 0);
				break;
			case 1: //拖动第2列
				switch (multiIndex[0]) { //判断第一列是什么
					case 0:
						switch (multiIndex[1]) {
							case 0:
								multiArray[2] = ['北京', '上海', '广州'];
								break;
							case 1:
								multiArray[2] = ['东京', '北海道'];
								break;
						}
						break;
					case 1:
						switch (multiIndex[1]) {
							case 0:
								multiArray[2] = ['伦敦', '曼彻斯特'];
								break;
							case 1:
								multiArray[2] = ['巴黎', '马赛'];
								break;
						}
						break;
				}
				multiIndex.splice(2, 1, 0);
				break;
		}
	};
</script>

<style scoped lang="scss">
	.nav {
		width: 650rpx;
		margin: 0 auto;
	}

	.cell {
		width: 300rpx;
		display: inline-block;
		font-size: 36rpx;
	}

	.ipt {
		font-size: 33rpx;
	}

	.list {
		display: inline-block;
	}

	.nova {
		width: 650rpx;
		height: 450rpx;
		background-color: white;
	}

	.nova-b {
		width: 650rpx;
		height: 92rpx;
		// background-color: pink;
		line-height: 92rpx;
		margin-top: 20rpx;

		h4 {
			display: inline-block;
			font-size: 36rpx;
		}

		span {
			display: inline-block;
			float: right;
			color: blue;
			margin-right: 20rpx;
		}
	}

	.nova-c {
		width: 650rpx;
		height: 92rpx;
		// background-color: pink;
		line-height: 92rpx;
		margin-top: 20rpx;

		p {
			display: inline-block;
			font-size: 30rpx;
		}

		span {
			display: inline-block;
			float: right;
			margin-right: 20rpx;
		}
	}

	.nova-d {
		position: relative;
		width: 650rpx;
		height: 115rpx;
		background-color: #ffffff;
		line-height: 115rpx;
		margin: 30rpx auto;

		p {
			display: inline-block;
			font-size: 30rpx;
		}

		input {
			width: 150rpx;
			height: 115rpx;
			text-align: center;
			display: inline-block;
			float: right;
			margin-right: 20rpx;
			font-size: 30rpx;
		}

		span {
			position: absolute;
			right: 0;
		}
	}

	.nova-e {
		position: relative;
		width: 650rpx;
		height: 115rpx;
		background-color: #ffffff;
		line-height: 115rpx;
		margin: 30rpx auto;

		p {
			display: inline-block;
			font-size: 30rpx;
		}

		span {
			position: absolute;
			font-size: 30rpx;
			top: 10rpx;
			left: 100rpx;
		}

		image {
			width: 80rpx;
			height: 80rpx;
			display: inline-block;
			margin-top: 20rpx;
		}

		radio {
			display: inline-block;
			float: right;
		}
	}

	.span {
		font-size: 25rpx;
		color: #848484;
	}
</style>